<template>
	<view>
		<view class="foot">
			<view class="box">
				<navigator url="" hover-class="none" class="lk" v-for="(item, index) in list" :key="index"
					@click="tabbarChange(item.path)" :class="current == index?'cur':''">
					<image :src="item.icon" class="ico ico-s" mode="heightFix"></image>
					<image :src="item.iconPath" class="ico ico-h" mode="heightFix"></image>
					<view class="tit">{{item.text}}</view>
				</navigator>

				<view class="sm">
					<image src="../../static/images/ft_03.png" class="ico" mode=""></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			current: String
		},
		data() {
			return {
				list: [{
						"path": "/batteryCharging/pages/index/index",
						"icon": "../../static/images/ft_01.png",
						"iconPath": "../../static/images/ft_01-1.png",
						"text": "电站"
					},
					{
						"path": "/batteryCharging/pages/personal/personal",
						"icon": "../../static/images/ft_02.png",
						"iconPath": "../../static/images/ft_02-1.png",
						"text": "我的"
					}

				]
			}
		},
		onShow() {

		},
		onLoad() {

		},
		methods: {
			tabbarChange(path) {
				uni.navigateTo({
					url: path
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import url(@/batteryCharging/static/css/common.scss);

	.foot {
		height: 128rpx;

		.box {
			position: fixed;
			width: 100%;
			left: 0;
			bottom: 0;
			z-index: 100;
			height: 128rpx;
			background-color: #fff;
			display: flex;
			justify-content: space-between;
			border-radius: 40rpx 40rpx 0 0;
			padding: 0 120rpx;
		}

		.lk {
			margin: 18rpx 0 0;
			padding: 10rpx 0;
			display: block;

			.ico {
				height: 38rpx;
				width: auto;
				display: block;
			}

			.ico-h {
				display: none;
			}

			.tit {
				font-size: 20rpx;
				color: #C4C7CC;
				margin-top: 8rpx;
			}

			&.cur {
				.ico-h {
					display: block;
				}

				.ico-s {
					display: none;
				}

				.tit {
					color: #FE5E10;
				}
			}
		}

		.sm {
			padding: 10rpx;
			width: 128rpx;
			height: 128rpx;
			border-radius: 50%;
			background-color: #fff;
			position: absolute;
			left: 50%;
			top: -35rpx;
			transform: translate(-50%, 0);

			.ico {
				width: 100%;
				height: 100%;
				display: block;
			}
		}
	}
</style>